<template>
  <div>
    <div id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          订单编号：
          <a-input
            :maxLength="128"
            style="width: 60%"
            v-model="searchData.applyCode"
          />
        </a-col>
        <a-col :span="6">
          客户编号：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.tenantId"
          >
            <a-select-option
              :value="item.tenantId"
              v-for="item in accArray"
              :key="item.id"
              :titles="item.title"
            >
              {{ item.companyName + "/" + item.tenantId }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          商品sku：
          <a-input
            :maxLength="128"
            style="width: 60%"
            v-model="searchData.sku"
          />
        </a-col>
        <a-col :span="6" v-show="expand">
          产品标签条码：
          <a-input
            :maxLength="128"
            style="width: 60%"
            v-model="searchData.productTag"
          />
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button type="primary" class="getTabData" @click="getTabData">
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="getTabData"
              @click="reset"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a></div
        ></a-col>
      </a-row>
      <a-row :gutter="24" style="margin-bottom: 15px" v-show="expand">
        <a-col :span="6">
          头程柜号：
          <a-input
            :maxLength="128"
            style="width: 60%"
            v-model="searchData.cargotankNumber"
          />
        </a-col>
        <a-col :span="6">
          物流单号：
          <a-input
            :maxLength="128"
            style="width: 60%"
            v-model="searchData.expressNo"
          />
        </a-col>
        <a-col :span="6">
          <div>
            入库仓库：<a-select
              allowClear
              show-search
              option-filter-prop="children"
              style="width: 60%"
              :filter-option="filterOption"
              v-model="searchData.warehousingId"
            >
              <a-select-option
                :value="item.warehouseId"
                v-for="item in warehouse"
                :key="item.warehouseId"
              >
                {{ item.titleName }}
              </a-select-option>
            </a-select>
          </div>
        </a-col>
        <a-col :span="6" v-show="expand">
          <div>
            提交时间：
            <a-range-picker
              style="width: 60%"
              @change="onChange"
              v-model="upTime"
            >
              <a-icon
                slot="suffixIcon"
                style="color: #3eae7c"
                type="calendar"
              />
            </a-range-picker>
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" style="margin-bottom: 15px" v-show="expand">
        <a-col :span="6">
          预计到仓时间：
          <a-range-picker
            style="width: 60%"
            @change="onChangeHouse"
            v-model="houseTime"
          >
            <a-icon slot="suffixIcon" style="color: #3eae7c" type="calendar" />
          </a-range-picker>
        </a-col>
        <a-col :span="6">
          <div v-show="expand">
            <a-button type="primary" class="getTabData" @click="getTabData">
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="getTabData"
              @click="reset"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a></div
        ></a-col>
      </a-row>
    </div>

    <a-spin tip="Loading..." :spinning="spinning">
      <a-tabs default-active-key="10" @change="callback">
        <a-tab-pane key="10">
          <span slot="tab">
            <a-badge
              :count="typeCountNum === null ? 0 : typeCountNum.examineCount"
              :offset="[15, 0]"
              >待审核
            </a-badge>
          </span>
          <IsCheckTable
            v-if="tabKeys === '10' || tableData.length >= 0"
            keys="待审核"
            :tableData="tableData"
            :getTabData="getTabData"
          />
        </a-tab-pane>
        <a-tab-pane key="20">
          <span slot="tab">
            <a-badge
              :count="typeCountNum === null ? 0 : typeCountNum.fbaCount"
              :offset="[15, 0]"
              >待发头程
            </a-badge>
          </span>
          <IsCheckTable
            v-if="tabKeys === '20'"
            keys="待发头程"
            :tableData="tableData"
            :getTabData="getTabData"
          />
        </a-tab-pane>
        <a-tab-pane key="60">
          <span slot="tab">
            <a-badge
              :count="typeCountNum === null ? 0 : typeCountNum.depoReceiveCount"
              :offset="[15, 0]"
              >在途中
            </a-badge>
          </span>
          <IsCheckTable
            v-if="tabKeys === '60'"
            keys="在途中"
            :tableData="tableData"
            :getTabData="getTabData"
          />
        </a-tab-pane>
        <a-tab-pane key="70">
          <span slot="tab">
            <a-badge
              :count="typeCountNum === null ? 0 : typeCountNum.receivedCount"
              :offset="[15, 0]"
              >已接收
            </a-badge>
          </span>
          <IsCheckTable
            v-if="tabKeys === '70'"
            keys="已接收"
            :tableData="tableData"
            :getTabData="getTabData"
          />
        </a-tab-pane>
        <a-tab-pane key="80">
          <span slot="tab">
            <a-badge
              :count="
                typeCountNum === null ? 0 : typeCountNum.receivedPositionCount
              "
              :offset="[15, 0]"
              >已入库
            </a-badge>
          </span>
          <IsCheckTable
            v-if="tabKeys === '80'"
            keys="已入库"
            :tableData="tableData"
            :getTabData="getTabData"
          />
        </a-tab-pane>
        <a-tab-pane key="40">
          <span slot="tab">
            <a-badge
              :count="typeCountNum === null ? 0 : typeCountNum.failCount"
              :offset="[15, 0]"
              >审核不通过
            </a-badge>
          </span>
          <IsCheckTable
            v-if="tabKeys === '40'"
            keys="审核不通过"
            :tableData="tableData"
            :getTabData="getTabData"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider :locale="locale">
        <a-pagination
          :current="searchData.current"
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
    <!-- 模态框 -->

    <InOrdersModal
      :tabKeys="tabKeys"
      :getTabData="getTabData"
      :IsCheckTypeCount="IsCheckTypeCount"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
import InOrdersModal from "@/components/system/auditCenter/IsCheck/IsCheckModal";
import {
  storage_audit,
  SKU_TypeCount,
  SKU_TypeData,
} from "@/apis/system/auditCenter/IsCheck";
import IsCheckTable from "@/components/system/auditCenter/IsCheck/IsCheckTable.vue";
export default {
  components: {
    IsCheckTable,
    InOrdersModal,
  },
  created() {
    this.getTabData();

    this.getTyapeSelect();
  },
  data() {
    return {
      spinning: false,
      upTime: null,
      houseTime: null,
      expand: false,
      GLMType: [],
      //气泡数量
      typeCountNum: {},

      tabKeys: "10",
      tableData: [],
      //分页数据
      locale,
      total: 30,
      searchData: {
        receive: "",
        //入库编号
        applyCode: "",
        // 状态
        applyState: "10",
        //入库仓库
        warehousingId: "",
        // 当前页,默认 1
        current: 1,
        size: 10,
        //客户编号
        tenantId: "",
        startDate: null,
        endtDate: null,
        houseEndDate: null,
        houseStartDate: null,
        sku: "",
        productTag: "",
        received: "",
        cargotankNumber: "",
        expressNo: "",
      },
    };
  },
  methods: {
    //重置按钮
    reset() {
      let size = this.searchData.size;
      let current = this.searchData.current;
      for (let key in this.searchData) {
        this.searchData[key] = null;
      }
      this.searchData.applyState = this.tabKeys;
      this.searchData.current = current;
      this.searchData.size = size;
      this.houseTime = null;
      this.upTime = null;
      if (this.tabKeys === "70") {
        this.searchData.receive = "1";
        this.searchData.applyState = null;
        this.getTabData();
        return false;
      } else {
        this.searchData.receive = null;
        this.getTabData();
      }
    },
    //   选项卡
    callback(key) {
      this.searchData.current = 1;
      this.tabKeys = key;
      if (key === "1") {
        this.searchData.applyState = null;
        this.searchData.receive = null;
        this.getTabData();
      } else if (key === "70") {
        this.searchData.applyState = null;
        this.searchData.receive = "1";
        this.getTabData();
      } else {
        this.searchData.applyState = key;
        this.searchData.receive = null;
        this.getTabData();
      }
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTabData();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTabData();
    },
    //  预计到仓配送日期改变
    onChangeHouse(date, dateString) {
      date;
      this.searchData.houseStartDate = dateString[0];
      this.searchData.houseEndDate = dateString[1];
    },
    //  提交时间日期改变
    onChange(date, dateString) {
      date;
      this.searchData.startDate = dateString[0];
      this.searchData.endtDate = dateString[1];
    },
    //下拉框过滤
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //获取表格数据
    async getTabData() {
      this.spinning = true;
      let { code, responseBody } = await storage_audit(this.searchData);
      if (code === "200") {
        let { records } = responseBody;
        this.total = responseBody.total * 1;
        this.tableData = records;
        this.spinning = false;
        this.IsCheckTypeCount();
      }
    },
    //更新红点气泡数据
    async IsCheckTypeCount() {
      let { code, responseBody } = await SKU_TypeCount();
      if (code === "200") {
        this.typeCountNum = responseBody === null ? null : responseBody;
      }
    },
    //获取下拉框分类
    async getTyapeSelect() {
      let { code, responseBody } = await SKU_TypeData({
        tagType: 4,
      });
      if (code === "200") {
        this.GLMType = responseBody;
      }
    },
  },
  computed: {
    ...mapState(["accArray"]),
    ...mapState(["warehouse"]),
  },
};
</script>

<style lang="less" scoped>
.top-btn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.top-btn:hover {
  background: #3eae7c;
  color: #fff;
}
input {
  width: auto;
}
.top-search {
  margin-bottom: 15px;
  span {
    margin-right: 20px;
  }
  input {
    width: 6rem;
  }
}
.getTabData {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.getTabData:hover {
  background: #3eae7c;
  color: #fff;
}
</style>
